<!-- 落地页--通过邀请好友分享 -->
<template>
  <view class="squeezePage">
    <PublicPage :showHead="false">
      <scroll-view scroll-y class="scroll_view">
        <!-- 自定义导航栏 -->
        <view class="nav-wrap" :style="[navStyle]">
          <!-- 返回上一页按钮图片 -->
          <image
              src="@/static/image/goHome_con.png"
              alt="icon"
              class="back-icon"
              @click.stop="_handleBack(0)"
          />
        </view>
        <view class="main-wrap">
          <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/bgImg/squeezePage_bg.png" mode="widthFix" class="bg_image" />
          <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/bgImg/squeezePage_btn.gif" mode="widthFix" class="btn_img fixedBottomBtn" @click="_handleBack(1)" />
        </view>
      </scroll-view>
    </PublicPage>
  </view>
</template>

<script>
import PublicPage from '@/components/publicPage/index.vue'
export default {
  name: 'squeezePage',
  components: {
    PublicPage
  },
  computed: {
    // 自定义导航栏样式
    navStyle() {
      const {navHeight, navTop, menuButtonObject} = this.$store.state.globalData
      const paddingBottom = navHeight - menuButtonObject.height - navTop
      const paddingRight = menuButtonObject.width + 14
      const style = {
        height: `${navHeight}px`,
        padding: `${navTop}px ${paddingRight}px ${paddingBottom}px 12px`,
      }
      return style
    },
  },
  data() {
    return {
      routeData: {}
    }
  },
  onLoad(option) {
    this.routeData = option
  },
  methods: {
    _handleBack(type) {
      // 点击立即去带货赚钱--将url参数的type存储vuex中--共进去首页使用
      if (type === 1) {
        this.$store.commit('SQUEEZE_TYPE', this.routeData.type)
      }
      this.switchTab({ url: '/pages/index/index' })
    },
  }
}
</script>

<style lang="scss" scoped>
.squeezePage {
  width: 100%;
  .scroll_view {
    height: 100%;
    width: 100%;
  }
  .nav-wrap {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: transparent;
    .back-icon {
      width: 60rpx;
      height: 60rpx;
      margin-left: 20rpx;
      background-size: cover;
      z-index: 9;
    }
  }
  .main-wrap {
    width: 100%;
    height: 100%;
  }
  .bg_image {
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 144rpx;
  }
  .btn_img {
    width: 100%;
    height: 144rpx;
  }
}
</style>